<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图制作</title>
		<!-- 轮播图: JavaScript 完成
			 前端框架: 简化开发模式 JavaScript技术完成的轮播图
						使用最简答的方式 功能一致
					terseBannerJS 专门针对轮播 使用方便 会html即可-->
		<!-- 1. 轮播图样式 -->
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!-- 3. 类似于html的固定写法{小心起名与轮播图框架冲突} -->
		<div class="main">
			<!-- 3.2 id="animation" js行为为主: 轮播行为 -->
			<div id="animation"></div>
			<!-- 3.3 class="container" 样式为主 开辟轮播空间 -->
			<div class="container">
				<!-- 选择轮播效果 延迟加载 -->
				<div class="banner" id="lazyload">
				<ul>
					<li><img src="img/1banner01.jpg" alt="1" /></li>
					<li><img src="img/2banner02.jpg" alt="2" /></li>
					<li><img src="img/3banner03.jpg" alt="3" /></li>
					<li><img src="img/4banner04.jpg" alt="4" /></li>
					<li><img src="img/5banner05.jpg" alt="5" /></li>
				</ul>
				</div>
			</div>
			
			
		</div>
		<!-- 2. 引入jquery封装轮播框架  .js文件 -->
		<script src="js/highlight.pack.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.terseBanner.min.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>